<template>
  <div>
    <el-dialog
      :destroy-on-close="true"
      :title="title"
      :visible="isShowDialog"
      width="50%"
      :close-on-click-modal="false"
      @close="cancelBtn"
    >
      <el-form
        ref="borkerForm"
        :label-position="labelPosition"
        :model="borkerForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名字" prop="name">
          <el-input v-model="borkerForm.name" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="borkerForm.email" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="borkerForm.phone" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="borkerForm.address" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="borkerForm.desc" />
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <el-upload
            action="#"
            list-type="picture-card"
            :class="{ disabled: fileList.length > 0 }"
            :on-preview="onPreview"
            :on-remove="onRemove"
            :file-list="fileList"
            :http-request="upload"
            :on-change="onChange"
            :before-upload="beforeUpload"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-progress
            v-if="isShowPercent"
            :text-inside="true"
            :stroke-width="26"
            :percentage="percent"
            style="width: 146px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="OKbtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="预览" :visible="isShow" @close="isShow = false">
      <el-row type="flex" justify="center">
        <img :src="previewUrl" alt="">
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
import { addBorker, editBorker } from '@/api/borker'
const cos = new COS({
  SecretId: 'AKIDCDyTihQs3xc1A2dx1oIVR6UbR1KM7cqm',
  SecretKey: 'h7G8j24pJWT9Ygla8PP8alfJgmb9RSBd'
})
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      borkerForm: {
        name: '',
        desc: '',
        image: '',
        phone: '',
        address: '',
        email: ''
      },
      title: '',
      fileList: [],
      rules: {
        name: [{ required: true, message: '此项不能为空', trigger: 'blur' }],
        email: [
          { required: true, message: '此项不能为空', trigger: 'blur' },
          {
            pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        phone: [{ required: true, message: '此项不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '此项不能为空', trigger: 'blur' }],
        desc: [{ required: true, message: '此项不能为空', trigger: 'blur' }]
      },
      labelPosition: 'top',
      isShowPercent: false,
      previewUrl: '',
      percent: 0,
      isShow: false
    }
  },
  methods: {
    // 确定按钮
    async OKbtn() {
      await this.$refs.borkerForm.validate()
      if (this.fileList.length === 0) {
        this.$message.warning('图片不能为空')
        return
      }
      if (this.fileList[0] && this.fileList[0].status !== 'success') {
        this.$message.warning('请等图片上传完成')
        return
      }
      if (this.borkerForm.id) {
        await editBorker({
          ...this.borkerForm,
          image: this.fileList[0] ? this.fileList[0].url : ''
        })
        this.$emit('OKbtn', this.borkerForm.id)
      } else {
        await addBorker({
          ...this.borkerForm,
          image: this.fileList[0] ? this.fileList[0].url : ''
        })
        this.$emit('OKbtn')
      }
      this.$message.success('操作成功')

      this.$emit('cancel')
    },
    // 关闭弹出框子传父
    cancelBtn() {
      this.$refs.borkerForm.resetFields()
      this.fileList = []
      this.borkerForm = {}
      this.$emit('cancel')
    },
    // 预览
    onPreview(file) {
      this.previewUrl = file.url
      this.isShow = true
      console.log(file)
    },
    // 删除照片
    onRemove(file, fileList) {
      this.fileList = fileList
    },
    // 点击上次照片
    onChange(file, fileList) {
      this.fileList = fileList
      console.log(this.fileList)
    },
    // 上传图片之前
    beforeUpload(file) {
      console.log(170, file)
      if (file.type.indexOf('image') === -1) {
        this.$message.warning('请上传图片格式')
        return false
      }
    },
    // 上传路径
    upload(params) {
      this.isShowPercent = true
      cos.putObject(
        {
          Bucket: 'hm-hr69-1308572162' /* 必须 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: params.file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: params.file, // 上传文件对象
          onProgress: (progressData) => {
            console.log(JSON.stringify(progressData))
            this.percent = progressData.percent * 100
          }
        },
        (err, data) => {
          console.log(err || data)
          this.fileList[0].url = 'http://' + data.Location
          this.fileList[0].status = 'success'

          setTimeout(() => {
            this.isShowPercent = false
          }, 1000)
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.disabled {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
</style>
